<template>
  <view class="RefrigertorB-save-manger">
    <view class="no-tory-tips" v-if="toryList.length === 0">
      <view class="tips-title">{{ $t('RefrigeratorB.StoreManager.EmptyToryListTip.Text') }}</view>
      <view class="tips-button" @click="showAdd()">+ {{ $t('RefrigeratorB.StoreManager.AddToryList.Text') }}</view>
    </view>
    <SimpleSettingCardRB
      v-for="(item, index) in toryList"
      :key="index"
      :name="item.brand"
      :id="item.id"
      :value="item?.expiredDesc"
      :type="item.categoryName"
      :show="''"
      @click="openDraw(item)"
      @delet-me="deletMe"
    ></SimpleSettingCardRB>

    <view class="footer-btn" v-if="toryList.length > 0">
      <view class="btn-left" @click="showEidt"> {{ $t('RefrigeratorB.StoreManager.EditToryList.Text') }} </view>
      <view class="btn-right" @click="showAdd()"> {{ $t('RefrigeratorB.StoreManager.AddToryList.Text') }} </view>
    </view>
  </view>
  <PageModal :show="isShowEditSelect" @close="closeEidt">
    <RefrigeratorBEditVue
      :tory-list="toryList"
      :isLeft="'left'"
      :is-show-edit-select="isShowEditSelect"
      @close-eidt="closeEidt"
      :control="control"
      @refsh-data="refshData"
    ></RefrigeratorBEditVue>
  </PageModal>
  <Modal :visible="isMaxTips" :ok-text="$t('RefrigeratorB.ConFirm.Text')" @ok="isMaxTips = false">
    <text class="max-tips">{{ $t('RefrigeratorB.StoreManager.ToryListMaxTips.Text') }}</text>
  </Modal>
</template>
<script lang="ts" setup>
import { deleteInventoryList } from '@/api/refrigetorB'
import PageModal from '@/common/pageModal.vue'
import Modal from '@/common/modal.vue'
import type { PayloadData, RefrigeratorBController, RefrigeratorBToryList } from '@/controller/RefrigeratorB/definition'
import SimpleSettingCardRB from '../components/simpleSettingCardRB.vue'
import RefrigeratorBEditVue from './RefrigeratorBEdit.vue'
import { safeTrack } from '@/dataReport/dataReportUtil'
import { trackEvent, TrackType } from '@/dataReport/tracks'
const props = defineProps<{
  control: RefrigeratorBController.Control
  toryList: RefrigeratorBToryList[]
}>()
const emit = defineEmits<{
  (e: 'refshData'): void
  (e: 'showAdd', item?: PayloadData, notClick?: boolean): void
}>()
const isShowEditSelect = ref(false)
const isMaxTips = ref(false)
function showEidt() {
  isShowEditSelect.value = true
}
function showAdd(item?: PayloadData, notClick?: boolean) {
  if (!notClick) {
    safeTrack(() => {
      trackEvent('RefrigeratorB.StoreManager.AddToryList.Tex', {}, TrackType.ApplianceDetail)
    })
  }

  if (props.toryList.length >= 200 && !item) {
    return (isMaxTips.value = true)
  }
  emit('showAdd', item)
}
function closeEidt() {
  safeTrack(() => {
    trackEvent('RefrigeratorB.StoreManager.CloseEdit.Button', {}, TrackType.ApplianceDetail)
  })
  isShowEditSelect.value = false
  refshData()
}
function openDraw(item: PayloadData) {
  safeTrack(() => {
    trackEvent('RefrigeratorB.StoreManager.Manager.Select', { ...item }, TrackType.ApplianceDetail)
  })
  showAdd(item, true)
}
function refshData() {
  emit('refshData')
}
function deletMe(id: number | undefined) {
  let toryList: RefrigeratorBToryList[] = JSON.parse(JSON.stringify(props.toryList))
  deleteInventoryList(props.control.store._datasource.haId, {
    inventoryListIds: [id],
  }).then((res) => {
    if (res.code === 0) {
      refshData()
    }
    safeTrack(() => {
      const item_info = toryList.find((items) => items.id === id)
      trackEvent(
        'delete_item',
        {
          item_info: JSON.stringify(item_info),
          successOrNot: res.code == 0,
          response_msg: res.msg,
          error_code: res.code,
        },
        TrackType.ApplianceDetail,
        'RefrigeratorB.Detail.Detete.Item'
      )
    })
  })
}
</script>
<style lang="less" scoped>
.max-tips {
  color: var(--primary-petrol, #2d3746);
  text-align: center;
  font-size: 32rpx;
  font-weight: 400;
}
.RefrigertorB-save-manger {
  margin-top: 32rpx;
  padding: 0 32rpx;
  padding-bottom: calc(88rpx + 72rpx);
  overflow: hidden;
  .no-tory-tips {
    margin: auto;
    margin-top: 40%;
    .tips-title {
      text-align: center;
      color: #000;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.338px;
      opacity: 0.6;
    }
    .tips-button {
      width: 350rpx;
      height: 88rpx;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--primary-petrol, #2d3746);
      font-size: 18px;
      font-weight: 600;
      margin: auto;
      background: var(--primary-grey-light, #f4f4f6);
      margin-top: 24rpx;
    }
  }
  .footer-btn {
    position: fixed;
    bottom: 0rpx;
    display: flex;
    padding-bottom: 72rpx;
    width: calc(100vw - 64rpx);
    padding-top: 32rpx;
    background-color: #fff;
    &::after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      width: 100vw;
      height: 1rpx;
      background-color: rgba(233, 233, 237, 1);
      left: -32rpx;
    }
    .btn-right {
      height: 88rpx;
      width: 80%;
      background: var(--primary-petrol, #2d3746);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .btn-left {
      flex: 1;
      height: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--primary-petrol, #333);
      font-size: 32rpx;
      font-weight: 500;
      letter-spacing: -0.429px;
      text-transform: capitalize;
    }
  }
}
</style>
